<template>
  <div>
    <van-empty v-if="!categoryid" description="描述文字" />
    <van-pull-refresh v-else v-model="refreshing" @refresh="onRefresh">
        <van-cell  v-show="index>(briefIntroduction.length-40)"  v-for="(item,index) in briefIntroduction" :key="index">
          <router-link :to="{name:'/DetailsNews', query:{ articleId: item.articleId }}">
            <div class="contentsNews">
              <div>
                <h4>{{ item.title }} </h4>
                <p>{{ item.createTime }}</p>
              </div>
              <div v-if="item.coverImgUrl" class="bigimg">
                <lazy-component>
                  <img v-lazy="item.coverImgUrl" />
                </lazy-component>
              </div>
            </div>
          </router-link>
        </van-cell>
    </van-pull-refresh>
  </div>
</template>
<script>
import {getNewsList} from "@/api/index.api";

export default {
  name: "BriefIntroduction",
  props: {
    active: Number,
    categoryid: Number,
  },
  data() {
    return {
      refreshing:false,
      briefIntroduction: [],//各类列表
      pagebrief: 40,//每页更新数目
      date: 1646461131351
    };
  },
  methods: {
    onRefresh() {
      this.pagebrief+=10;
      console.log(11111)
      this.getNewsList()
      this.refreshing=false
    },
    getNewsList(){
      getNewsList(1, this.pagebrief, this.categoryid).then(res => {
        this.briefIntroduction = res.rows
        // console.log(res.rows)
      })
    }
  },
  created() {
    this.getNewsList()
  },
}
</script>

<style lang="less" scoped>
.contentsNews {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  padding: 5px 0;
  div{
    width: 100%;
    padding: 0 10px 0 0;
    p{
      color: darkgrey;
    }
    h4 {
      color: black;
      //text-align: start;
      overflow:hidden;
      text-overflow:ellipsis;
      display:-webkit-box;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:2;
      //border-radius: 10px;
    }
  }
  .bigimg {
    flex-shrink: 0;
    width: 101px;
    height: 101px;
    //border: 1px solid black;
    padding: 1px;
    overflow: hidden;
    //background-color: cadetblue;
    img{
      width: 100px;
      height: 100px;
    }
  }
}
</style>